<template>
  <div class="container">
    <!-- 顶部导航 -->
    <van-nav-bar title="网易严选" left-arrow>
      <template #left>
        <van-icon name="wap-home-o" size="32" color="#2b382f" @click="toHome" />
      </template>
      <template #right>
        <van-icon name="search" size="32" color="#2b382f" @click="toSearch" />
        <van-icon name="cart-o" size="32" color="#2b382f" :badge="cartList.length" @click="toCart" />
      </template>
    </van-nav-bar>

    <!-- 收货地址 -->
    <div class="u-address-bg"></div>
    <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" right-icon="arrow"
      :show-add-button="false" :switchable="false" />

    <!-- 礼品卡 -->
    <ul class="gift-list">
      <li class="gift-item">
        <van-checkbox name="a" disabled shape="square" icon-size="14px">
          <span class="custom-title">礼品卡余额:￥0.00</span>
        </van-checkbox>
        <div>
          <van-icon name="arrow" color="#d9d9d9" />
        </div>
      </li>
      <li class="gift-item">
        <van-checkbox name="a" disabled shape="square" icon-size="14px">
          <span class="custom-title"> 余额:￥0.00</span>
        </van-checkbox>
        <div>
          <van-icon name="info-o" icon-size="8px" color="#d9d9d9" />
        </div>
      </li>
    </ul>

    <!-- 商品合计 -->
    <ul class="goodtotal">
      <li class="goodtotal-item">
        <span class="custom-title">商品合计 </span>
        <span class="custom-title">￥{{ totalAmount }}.00</span>
      </li>
      <li class="goodtotal-item">
        <span class="custom-title">邮费 </span>
        <span class="custom-title">￥0.00</span>
      </li>
      <li class="goodtotal-item">
        <span class="custom-title">活动优惠 <van-icon name="info-o" icon-size="8px" /> </span>
        <span class="custom-title">￥{{ cartList.length ? discountNum : 0 }}.00</span>
      </li>
      <li class="goodtotal-item">
        <van-checkbox name="a" shape="square" icon-size="14px">
          <span class="custom-title">我要开发票</span>
        </van-checkbox>
        <van-icon name="arrow" color="#d9d9d9" />
      </li>
    </ul>

    <!-- 商品列表 -->
    <ul class="goods">
      <li class="goods-item" v-for="(item, index) in cartList" :key="item.skuId">
        <div class="item-top">
          <span> 包裹{{ index + 1 }}</span> 18:00前支付,预计8月7日送达
        </div>
        <div class="item-bom">
          <div class="item-left">
            <img :src="item.imgUrl" />
          </div>
          <div class="item-right">
            <p class="right1">
              <span><i>限时优惠</i>{{ item.skuName }}</span> <span>x{{ item.skuNum }}</span>
            </p>
            <p class="right2">{{ item.skuName }}</p>
            <p class="right3">
              ￥{{ item.orderPrice }}.00 <del>￥{{ item.orderPrice }} .00</del>
            </p>
          </div>
        </div>
        <p>不享受学生特权</p>
      </li>
    </ul>

    <!-- 霸王条款 -->
    <div class="agree">
      <van-checkbox v-model="checkAgree" checked-color="#a9adab" shape="square">
        我以同意《网易严选服务协议》
      </van-checkbox>
    </div>

    <!-- 底部支付 -->
    <van-submit-bar :price="cartList.length ? formatAmount : 0" button-text="提交订单" @submit="onSubmit" label="应付" />
  </div>
</template>

<script setup lang="ts">
import { reqTrade, reqSubmitOrder } from '@/api/order'
import { showToast } from 'vant'
import { computed, onMounted } from 'vue'
import { ref } from 'vue'
import type { IAddress, ITradeInfoItem } from '@/types/order'
import { useRouter } from 'vue-router'
const router = useRouter()

//#region 顶部按钮
const toHome = () => {
  router.push('/home')
}
const toSearch = () => {
  router.push('/search')
}
const toCart = () => {
  router.push('/cart')
}
//#endregion

//#region  地址
const chosenAddressId = ref<number>(1)
const list = [
  {
    id: '1',
    name: '张三',
    tel: '18612341234',
    address: '陕西省西安市雁塔区团结南路和方智能大厦B座4楼',
    isDefault: true
  }
]

// const onAdd = () => showToast('新增地址')
// const onEdit = () => showToast('编辑地址:')

//#endregion

//#region 获取商品列表
const cartList = ref<ITradeInfoItem[]>([])
const totalAmount = ref<number>(0)
const discountNum = ref<number>(-40)
const totalNum = ref<number>(0)
const tradeNo = ref<string>('')
const reqCartList = async () => {
  const res = await reqTrade()
  if (res.code === 200) {
    cartList.value = res.data.detailArrayList
    totalAmount.value = res.data.totalAmount
    totalNum.value = res.data.totalNum
    tradeNo.value = res.data.tradeNo
  }
}

const formatAmount = computed(() => {
  const res = (totalAmount.value + discountNum.value) * 100
  return res
})
//#endregion

//#region 提交订单
const Address = ref<IAddress>()
const checkAgree = ref(false)

const onSubmit = async () => {
  if (!checkAgree.value) return showToast('请勾选协议按钮')
  // showToast('提交按钮')
  Address.value = list[chosenAddressId.value - 1]
  // console.log(Address.value)
  const params = {
    tradeNo: tradeNo.value,
    consignee: Address.value.name, // 收件人姓名
    consigneeTel: Address.value.tel, // 	收件人电话
    deliveryAddress: Address.value.address, // 收件地址
    paymentWay: 'ONLINE', // 支付方式(ONLINE代表在线)
    orderComment: '111', // 订单备注
    orderDetailList: cartList.value // 商品列表
  }
  console.log(params)
  const res = await reqSubmitOrder(params)
  if (res.code === 200) {
    console.log(res)
    // 通过路由参数传递订单id
    console.log(formatAmount.value)
    router.push(`/pay?orderId=${res.data}&&totalAmount=${totalAmount.value}`)
  }
}
//#endregion

onMounted(() => {
  reqCartList()
})
</script>
<script lang="ts">
export default {
  name: 'MyOrder'
}
</script>

<style scoped lang="less">
:deep(p) {
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.container {
  position: relative;
  font-size: 14px;
  background-color: #eee !important;
}

:deep(.van-nav-bar .van-hairline--bottom) {
  height: 44px;
  box-sizing: border-box;
}

:deep(.van-nav-bar__content) {
  position: fixed;
  top: 0;
  width: 100%;
  height: 44px;
  background-color: #fafafa;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

:deep(.van-address-item) {
  padding: 10px !important;
}

// 礼品卡
.gift-list {
  background-color: #fff;
  height: 104px;
  margin-bottom: 10px;
  padding: 0 5px 0 10px;
  box-sizing: border-box;

  .gift-item {
    height: 54px;
    line-height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:first-child {
      border-bottom: 2px solid #d9d9d9;
    }

    .van-checkbox {
      font-size: 14px;
      height: 19px;
    }
  }
}

// 商品合计
.goodtotal {
  background-color: #fff;
  height: 208px;
  box-sizing: border-box;
  padding: 0 15px;
  margin-bottom: 10px;

  .goodtotal-item {
    box-sizing: border-box;
    border-bottom: 1px solid #d9d9d9;

    font-size: medium;
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// 商品列表
.goods {
  .goods-item {
    background-color: #fff;
    margin-bottom: 10px;

    .item-top {
      padding: 12.5px 0;
      margin: 0 15px;
      font-size: 14px;
      border-bottom: 1px solid #d9d9d9;

      span {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .item-bom {
      padding: 10px 15px 0 15px;
      display: flex;
      justify-content: space-between;

      .item-left {
        img {
          width: 80px;
          height: 80px;
        }
      }

      .item-right {
        padding: 0 10px;

        .right1 {
          display: flex;

          span>i {
            color: #f48f18;
          }
        }

        .right2 {
          color: #999;
          font-size: 12px;
        }

        .right3 {
          del {
            color: #999;
          }
        }
      }
    }

    &>P {
      padding: 0 15px;
    }
  }
}

.agree {
  height: 100px;
  padding: 16px 0 16px 15px;
}

:deep(.van-address-list) {
  padding: 0 !important;
  height: 75px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box;

  .van-address-item {
    box-sizing: border-box;
    height: 75px !important;
    padding: 0 var(--van-address-list-item-padding);
    border-radius: 0 !important;
  }
}

.u-address-bg {
  margin-top: 44px;
  height: 5px;
  box-sizing: border-box;
  background: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-67880192dc.png?imageView&type=webp) repeat-x;
  background-size: 30px 5px;
  z-index: 100;
}
</style>
